import { Button, LineEdit, ListView, VerticalBox, HorizontalBox, CheckBox, ComboBox, TextEdit, DatePickerPopup, TimePickerPopup } from "std-widgets.slint";

// 添加优先级枚举
export enum Priority {
    Low,
    Medium,
    High
}

export struct TodoItem {
    id: string,
    title: string,
    completed: bool,
    priority: Priority,
    due_date: string, // 添加截止日期字段，使用字符串类型方便存储和显示
}

export component TodoApp inherits Window {
    width: 920px;
    height: 800px;
    title: "NoteTodo - 待办事项管理";
    background: #f9f9f9;

    in-out property <[TodoItem]> todos: [];
    in-out property <string> current-edit-id: "";
    in-out property <string> new-todo-text: "";
    in-out property <Priority> new-todo-priority: Priority.Medium;
    in-out property <string> new-todo-due-date: ""; // 添加新待办事项的截止日期属性
    in-out property <string> temp-edit-due-date: ""; // 临时存储编辑状态的截止日期
    
    // 临时存储选择的日期和时间
    private property <string> temp-date: "";
    private property <int> temp-hour: 0;
    private property <int> temp-minute: 0;
    private property <bool> is-editing-mode: false; // 标记是否处于编辑模式

    // 定义共享的弹出位置坐标
    private property <length> popup-x: (root.width - 300px) / 2;
    private property <length> popup-y: (root.height - 300px) / 2 - 100px;

    // 新添加的DatePickerPopup（新建待办事项使用）
    global-date-picker := DatePickerPopup {
        x: root.popup-x;
        y: root.popup-y;
        accepted(date) => {
            // 格式化日期为 YYYY-MM-DD
            root.temp-date = date.year + "-" + (date.month < 10 ? "0" + date.month : date.month) + "-" + (date.day < 10 ? "0" + date.day : date.day);
            
            // 关闭日期选择器
            global-date-picker.close();
            
            // 打开时间选择器
            global-time-picker.show();
        }
        canceled => {
            global-date-picker.close();
        }
    }
    
    // 添加TimePickerPopup
    global-time-picker := TimePickerPopup {
        x: root.popup-x;
        y: root.popup-y;
        accepted(time) => {
            // 编辑模式
            if (root.is-editing-mode) {
                root.set-due-date(root.current-edit-id, 
                    root.temp-date + " " + (time.hour < 10 ? "0" + time.hour : time.hour) + ":" + (time.minute < 10 ? "0" + time.minute : time.minute));
                root.is-editing-mode = false;
            } else {
                // 新建模式
                root.new-todo-due-date = root.temp-date + " " + (time.hour < 10 ? "0" + time.hour : time.hour) + ":" + (time.minute < 10 ? "0" + time.minute : time.minute);
            }
            global-time-picker.close();
        }
        canceled => {
            global-time-picker.close();
        }
    }
    
    // 编辑待办事项使用的DatePickerPopup
    global-edit-date-picker := DatePickerPopup {
        x: root.popup-x;
        y: root.popup-y;
        accepted(date) => {
            // 标记为编辑模式
            root.is-editing-mode = true;
            
            // 格式化日期为 YYYY-MM-DD
            root.temp-date = date.year + "-" + (date.month < 10 ? "0" + date.month : date.month) + "-" + (date.day < 10 ? "0" + date.day : date.day);
            
            // 关闭日期选择器
            global-edit-date-picker.close();
            
            // 打开时间选择器
            global-time-picker.show();
        }
        canceled => {
            global-edit-date-picker.close();
        }
    }

    callback add-todo();
    callback toggle-todo(string);
    callback delete-todo(string);
    callback edit-todo(string, string);
    callback start-edit(string);
    callback cancel-edit();
    // 添加设置优先级的回调
    callback set-priority(string, Priority);
    // 添加设置截止日期的回调
    callback set-due-date(string, string);

    VerticalBox {
        padding: 16px;
        // 设置垂直布局的对齐方式为拉伸，使子元素水平填满容器
//        alignment: LayoutAlignment.stretch;
        // 设置子元素之间的垂直间距为16px
        spacing: 16px;
//        visible: true;
        
        Rectangle {
            height: 400px;
            background: white;
            drop-shadow-offset-x: 0px;
            drop-shadow-offset-y: 2px;
            drop-shadow-blur: 5px;
            drop-shadow-color: #00000020;

            VerticalBox {
                alignment: start;
                padding: 16px;
                spacing: 12px;
                height: 400px;

                text-new := Text {
                    text: "新建待办事项";
                    font-size: 18px;
                    font-weight: 600;
                    color: #333333;
                }

                hb1 := HorizontalBox {
                    spacing: 12px;

                    // 使用日期按钮和弹出选择器
                    VerticalLayout {
                        alignment: center;
                        date-btn := Button {
                            text: root.new-todo-due-date != "" ? root.new-todo-due-date : "选择截止时间";
                            clicked => {
                                global-date-picker.show();
                            }
                            height: 36px;
                        }
                    }
                    
                    // 添加优先级选择下拉框
                    ComboBox {
                        width: 100px;
                        model: ["低", "中", "高"];
                        current-index: root.new-todo-priority == Priority.High ? 2 : root.new-todo-priority == Priority.Medium ? 1 : 0;
                        selected => {
                            if (self.current-index == 0) {
                                root.new-todo-priority = Priority.Low;
                            } else if (self.current-index == 1) {
                                root.new-todo-priority = Priority.Medium;
                            } else {
                                root.new-todo-priority = Priority.High;
                            }
                        }
                    }
                }

                VerticalLayout {
                    padding: 8px;
                    vertical-stretch: 1;
                    height: 200px;

                    TextEdit {
                        placeholder-text: "添加新的待办事项...";
                        text <=> root.new-todo-text;
                        edited => {
                            // 文本编辑时的回调
                        }
                        key-pressed(event) => {
                            if (event.text == "\n" && event.modifiers.control) {
                                root.add-todo();
                                return EventResult.accept;
                            }
                            return EventResult.reject;
                        }
                        height: 100%;
                        width: 100%;
                    }
                }

                hb2 := HorizontalBox {
                    spacing: 12px;
                    alignment: end;
                    Button {
                        text: "添加";
                        height: 36px;
                        width: 80px;
                        clicked => {
                            root.add-todo();
                        }
                    }
                }
            }
        }

        Rectangle {
            // 使用垂直伸展，让这个区域填充剩余空间
            vertical-stretch: 1;
            background: white;
            drop-shadow-offset-x: 0px;
            drop-shadow-offset-y: 2px;
            drop-shadow-blur: 5px;
            drop-shadow-color: #00000020;

            VerticalBox {
                padding-left: 16px;
                padding-right: 16px;
                padding-top: 16px;
                padding-bottom: 16px;
                spacing: 12px;

                Text {
                    text: "待办事项列表";
                    font-size: 18px;
                    font-weight: 600;
                    color: #333333;
                }

                if (root.todos.length == 0): Rectangle {
                    height: 80px;
                    VerticalBox {
                        alignment: center;
                        Text {
                            text: "暂无待办事项";
                            color: #888888;
                            font-size: 14px;
                            horizontal-alignment: center;
                        }
                    }
                }

                ListView {
                    for todo in root.todos: HorizontalLayout {
                        height: 60px; // 减小高度，使布局更紧凑
                        alignment: start;
                        spacing: 4px;

                        // 使用单独的矩形作为优先级颜色指示器
                        VerticalLayout {
                            padding-top: 4px;
                            padding-bottom: 4px;
                            alignment: center;
                            Rectangle {
                                width: 4px;
                                height: parent.height - 8px;
                                background: todo.priority == Priority.High ? #ff4d4f : todo.priority == Priority.Medium ? #faad14 : #52c41a;
                            }
                        }

                        VerticalLayout {
                            width: parent.width;
                            horizontal-stretch: 1;
                            padding-top: 4px;
                            padding-bottom: 4px;
                            Rectangle {
                                width: parent.width - 8px;
                                height: parent.height - 8px;
                                background: touch.pressed ? #e8f0ff : touch.has-hover ? #f5f8ff : white;
                                border-width: 1px;
                                border-color: touch.has-hover ? #e0e8ff : #eeeeee;

                                HorizontalLayout {
                                    height: parent.height;
                                    z: 1;
                                    spacing: 8px;
                                    padding-left: 8px;
                                    padding-right: 8px;

                                    // 复选框 - 位置固定
                                    VerticalLayout {
                                        alignment: center;
                                        width: 32px;
                                        CheckBox {
                                            checked: todo.completed;
                                            toggled => {
                                                root.toggle-todo(todo.id);
                                            }
                                            width: 24px;
                                            height: 24px;
                                        }
                                    }

                                    // 编辑状态
                                    if (root.current-edit-id == todo.id): HorizontalLayout {
                                        spacing: 8px;
                                        alignment: start;
                                        property <string> edit-text: todo.title;
                                        property <string> edit-due-date: todo.due_date;

                                        // 标题编辑框 - 固定位置
                                        VerticalLayout {
                                            alignment: center;
                                            width: root.width * 0.3;
                                            LineEdit {
                                                width: parent.width;
                                                text <=> edit-text;
                                                accepted => {
                                                    root.edit-todo(todo.id, edit-text);
                                                }
                                                height: 32px;
                                                horizontal-stretch: 1;
                                            }
                                        }

                                        // 截止日期按钮 - 固定位置
                                        VerticalLayout {
                                            alignment: center;
                                            width: 160px;
                                            Button {
                                                text: edit-due-date != "" ? edit-due-date : "选择截止时间";
                                                clicked => {
                                                    global-edit-date-picker.show();
                                                }
                                                height: 32px;
                                            }
                                        }

                                        // 优先级选择 - 固定位置
                                        VerticalLayout {
                                            alignment: center;
                                            width: 80px;
                                            ComboBox {
                                                model: ["低", "中", "高"];
                                                current-index: todo.priority == Priority.High ? 2 : todo.priority == Priority.Medium ? 1 : 0;
                                                selected => {
                                                    if (self.current-index == 0) {
                                                        root.set-priority(todo.id, Priority.Low);
                                                    } else if (self.current-index == 1) {
                                                        root.set-priority(todo.id, Priority.Medium);
                                                    } else {
                                                        root.set-priority(todo.id, Priority.High);
                                                    }
                                                }
                                            }
                                        }

                                        // 操作按钮 - 固定位置
                                        HorizontalLayout {
//                                                alignment: center;
                                                spacing: 8px;
                                            VerticalLayout {
                                                alignment: center;
                                                Button {
                                                    text: "保存";
                                                    height: 32px;
                                                    width: 60px;
                                                    clicked => {
                                                        root.edit-todo(todo.id, edit-text);
                                                        root.set-due-date(todo.id, edit-due-date);
                                                    }
                                                }
                                            }

                                            VerticalLayout {
                                                alignment: center;
                                                Button {
                                                    text: "取消";
                                                    height: 32px;
                                                    width: 60px;
                                                    clicked => {
                                                        root.cancel-edit();
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    // 显示状态
                                    if (root.current-edit-id != todo.id): HorizontalLayout {
                                        spacing: 8px;
                                        alignment: start;

                                        // 标题 - 固定位置
                                        VerticalLayout {
                                            alignment: center;
                                            width: root.width * 0.3;
                                            Text {
                                                horizontal-stretch: 1;
                                                text: todo.title;
                                                font-size: 16px;
                                                color: todo.completed ? #888888 : #333333;
                                                font-weight: todo.completed ? 400 : 500;
                                            }
                                        }
                                        //截止日期 - 固定位置
                                        VerticalLayout {
                                            alignment: center;
                                            width: 160px;
                                            if (todo.due_date != ""):Text {
                                                text: "截止: " + todo.due_date;
                                                font-size: 12px;
                                                color: #666666;
                                            }
                                        }


                                        // 优先级标签 - 固定位置
                                        VerticalLayout {
                                            alignment: center;
                                            width: 80px;
                                            Text {
                                                text: todo.priority == Priority.High ? "高" : todo.priority == Priority.Medium ? "中" : "低";
                                                color: todo.priority == Priority.High ? #ff4d4f : todo.priority == Priority.Medium ? #faad14 : #52c41a;
                                                font-weight: 600;
                                                font-size: 14px;
                                                horizontal-alignment: center;
                                            }
                                        }

                                        // 操作按钮 - 固定位置
                                        HorizontalLayout {
//                                                alignment: center;
                                                spacing: 8px;
                                            VerticalLayout {
                                                alignment: center;
                                                Button {
                                                    text: "编辑";
                                                    height: 32px;
                                                    width: 60px;
                                                    clicked => {
                                                        root.start-edit(todo.id);
                                                    }
                                                }
                                            }

                                            VerticalLayout {
                                                alignment: center;
                                                Button {
                                                    text: "删除";
                                                    height: 32px;
                                                    width: 60px;
                                                    clicked => {
                                                        root.delete-todo(todo.id);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                // 每个列表项的 TouchArea
                                touch := TouchArea {
                                    z: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
